<template>
  <div>
    <el-card>
      <h2>{{ restaurant.name }}</h2>
      <img class='tmp' :src="restaurant.image" alt="餐厅图片"/>
      <el-rate v-model="restaurant.rating" disabled></el-rate>
      <el-table :data="restaurant.dishes">
        <el-table-column prop="name" label="菜品名称"/>
        <el-table-column prop="price" label="价格"/>
        <el-table-column prop="image" label="图片">
          <template #default="scope">
            <img :src="scope.row.image" alt="菜品图片" style="width: 50px; height: 50px;"/>
          </template>
        </el-table-column>
      </el-table>

      <p>用户评价</p>
      <el-button @click="goBack">返回餐厅列表</el-button>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';


const route = useRoute();
const router = useRouter();
const restaurant = ref({
  name: '',
  image: '',
  dishes: [],
  rating: 0
});

onMounted(() => {
  console.log('路由参数：', route.params);
  const restaurantId = route.params.id;
  // 模拟获取餐厅数据
  restaurant.value = getRestaurantDataById(restaurantId);
});

function getRestaurantDataById(id) {
  // 这里可以替换为实际的数据获取逻辑
  const data = {
    1: {
      name: '第一家餐馆',
      image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ozI2ahPZRjyw011IYeM-8AHaFj?rs=1&pid=ImgDetMain',
      dishes: [
        {
          name: '菜品1',
          price: '¥100',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ozI2ahPZRjyw011IYeM-8AHaFj?rs=1&pid=ImgDetMain'
        },
        {
          name: '菜品2',
          price: '¥200',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ozI2ahPZRjyw011IYeM-8AHaFj?rs=1&pid=ImgDetMain'
        }
      ],
      rating: 5
    },
    2: {
      name: '炒鸡店——一号店',
      image: 'https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0',
      dishes: [
        {
          name: '菜品3',
          price: '¥150',
          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.5b5ff625c18bd8a7f38c637adbad69c5?rik=LGr20SshQb68Ew&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50099%2f7097.jpg_wh860.jpg&ehk=FYc0uKmqt96IrQWlQSDXTZ1Ka1BlkrP3QtnokEtCK7g%3d&risl=&pid=ImgRaw&r=0'
        },
        {
          name: '菜品4',
          price: '¥250',
          image: 'https://ts1.cn.mm.bing.net/th/id/R-C.02c432c82120394cfd3d0ee2b68458ff?rik=5fFZd%2bU2AOZITQ&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20190704%2f8720431_212819635000_2.jpg&ehk=lwHXio%2bGcrLhC92opR8DbiIuL0QoQnOkEB4%2fZIWtf6o%3d&risl=&pid=ImgRaw&r=0'
        }
      ],
      rating: 4.0
    }
  };
  return data[id] || {};
}

function goBack() {
  router.push('/restaurants');
}


</script>
<style>
.tmp {
  width: 100px;
  height: 100px;
}
</style>